<template>
  <div class="hello">
    <el-row style="font-size: 20px">
      <el-col :span="24">
        <el-col :span="20">
          <el-checkbox v-model="checked" style="width: 50px; height: 50px"></el-checkbox>
          <span style="font-size: 28px; margin-left: 10px">只显示生产模具任务</span>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" class="button" @click="lingqu()" style="font-size: 20px"
            >领取任务</el-button
          >
        </el-col>
      </el-col>
      <el-col :span="24">
        <el-divider></el-divider>
      </el-col>
    </el-row>
    <el-row type="flex" align="top" style="font-size: 20px">
      <el-col :span="tableWidth" class="tablel">
        <el-table
          :data="tableData"
          stripe
          v-scroll="handleScroll"
          ref="content"
          style="overflow: auto; height: 100%; font-size: 20px"
          @current-change="handleSelectionChange"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="key1" label="任务编号"> </el-table-column>
          <el-table-column prop="key2" label="物料编码"> </el-table-column>
          <el-table-column prop="key3" label="物料描述"> </el-table-column>
          <el-table-column prop="key4" label="任务数量"> </el-table-column>
          <el-table-column prop="key5" label="模具编号"> </el-table-column>
          <el-table-column prop="key6" label="工单类型"> </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="modelWidth">
        模具名称:
        <br />
        <span style="font-size: 15px"> &nbsp;{{ selectData.key6 }} </span>
        <br />
        模具状态:
        <span style="font-size: 15px">
          {{ selectData.key7 }}
        </span>
        <el-divider></el-divider>
        <div>
          工序进程：
          <br />
          <div
            v-for="(data, index) in selectData.gongxulist"
            :key="index"
            style="margin-left: 40px"
          >
            <span v-if="data.key4 == '进行中'" style="color: red">{{ data.key1 }}(当前工序)</span>
            <span v-else>{{ data.key1 }}</span>
            <br />
            <span v-if="index == selectData.gongxulist.length - 1" style="margin-left: 45px">
              {{ data.key2 }}/{{ data.key3 }}
            </span>
            <span v-else>
              <i class="el-icon-bottom" style="font-size: 40px"></i>{{ data.key2 }}/{{ data.key3 }}
            </span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    <h1> 待领任务 </h1> {{this.$store.state.siteWork.name }}-->
  </div>
</template>

<script>
export default {
  name: 'PendingTask',
  data() {
    return {
      isScrollingToBottom: false,
      tableData: [
        {
          key1: 's00000032',
          key2: 'B00023033',
          key3: '1265F1外链板/本色/下料/40Cr',
          key4: '1000',
          key5: 'MJ0001',
          key6: '机位工单',
          key7: '模具一',
          key8: '在制',
          gongxulist: [
            {
              key1: '工序1',
              key2: '900',
              key3: '1000',
              key4: '已完成',
            },
            {
              key1: '工序2',
              key2: '500',
              key3: '1000',
              key4: '已完成',
            },
            {
              key1: '工序3',
              key2: '0',
              key3: '1000',
              key4: '已完成',
            },
            {
              key1: '工序4',
              key2: '0',
              key3: '1000',
              key4: '进行中',
            },
            {
              key1: '工序5',
              key2: '0',
              key3: '1000',
              key4: '未开始',
            },
          ],
        },
      ],
      selectData: {},
      checked: true,
      tableWidth: 24,
      modelWidth: 0,
    };
  },
  create() {
    // 读取store的name
    console.log('打印***1111', 1111);
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true);
  },
  methods: {
    handleScroll(event) {
      const A = event.target;
      if (A.clientHeight + A.scrollTop + 2 >= A.scrollHeight) {
        if (!this.isScrollingToBottom) {
          this.isScrollingToBottom = true;
          console.log('滑到底部了');
          // 执行加载更多数据的操作
        }
      } else {
        this.isScrollingToBottom = false;
      }
    },
    // 选中的表格数据
    handleSelectionChange(value) {
      this.selectData = value;
      this.tableWidth = 18;
      this.modelWidth = 6;
      console.log(value);
    },
    // 领取任务
    lingqu() {
      console.log('领取任务');
    },
  },
};
</script>

<style scoped lang="scss">
.button {
  font-size: 18px;
}
.tablel {
  //width: 100%;
  height: 82vh;
}
</style>
